<!-- 页面外套 -->
<div class="page-wrapper" id="personnel_salary">

    <!-- 数据网格 -->
    <div class="datagrid datagrid-striped">
        <!-- 工具条组 -->
        <div class="tool-group">
            <form class="tool-search">
                <input type="hidden" name='page'>
                <input type="hidden" name='recPerPage'>
                <div class="im-label">
                    <div class="input-group">
                        <select class="form-control" name="sid">
							<option value="1">姓名</option>
							<option value="2">用户名</option>
                        </select>
                        <span class="input-group-addon fix-border fix-padding"></span>
                        <input type="text" class="form-control" name="search">
                    </div>
                </div>
                <label>
                    <span>部门</span>
                    <select class="form-control" name="department"><!-- JS推进 --></select>
                </label>
                <div class="im-label">
                    <span>时间</span>
                    <div class="input-group">
                        <input type="text" class="form-control" name="starttime" readonly>
                        <span class="input-group-addon fix-border fix-padding"></span>
                        <input type="text" class="form-control" name="endtime" readonly>
                    </div>
                </div>
                <label><button type="button" class="btn btn-primary tool_search_btn"><i class="icon icon-search"></i> 搜索</button></label>
                <div class="clearfix"></div>
            </form>
        </div>
        <!-- tool-group -->

        <div class="datagrid-container"></div>
        <ul class="pager btn-mini" data-elements="prev,pages,next"></ul>
    </div>
    <!-- datagrid -->

    <!-- 操作数据 -->
    <form class="line_deal_form"><input type="hidden" name="id"></form>

</div>
<!-- page-wrapper -->

<script>
$(function() {

    //变量声明
    var personnel_salary = $("#personnel_salary");
    var personnel_salary_api = {
        datagrid : API.test_datagrid,
        department : LOCAL+"Test/test_select.json",
        confirm : API.test_response,
        send : API.test_response,
        esc : API.test_response,
    }

    //数据表格
    //数据源
    var personnel_salary_dataSource = {
        cols   : [
            {name: "name", label: "姓名",width: 100},
            {name: "name", label: "用户名",width: 90},
            {name: "text4",label: "部门",width: 90},
            {name: "text4",label: "职位",width: 90},
            {name: "text4",label: "应出勤天数",width: 90},
            {name: "text4",label: "实际出勤天数",width: 120},
            {name: "text4",label: "事假天数",width: 90},
            {name: "text4",label: "事假扣款",width: 90},
            {name: "text4",label: "病假天数",width: 90},
            {name: "text4",label: "病假扣款",width: 90},
            {name: "text4",label: "业绩提成",width: 100},
            {name: "text4",label: "绩效",width: 100},
            {name: "text4",label: "社保扣款",width: 100},
            {name: "text4",label: "个税",width: 90},
            {name: "text4",label: "其他",width: 90},
            {name: "text4",label: "实际工资",width: 90},
            {name: "text4",label: "应发工资",width: 90},
            {name: "text4",label: "发送状态",width: 90},
            {name: "text4",label: "查看状态",width: 100},
            {name: "text4",label: "确认状态",width: 100},
            {name: "",label:"操作",width:110,html:true,
                valueOperator : {
                    getter : function(dataValue,cell){
                        return `
                        <a class="line_confirm_btn" dataId="${cell.config.data.id}">确认</a>
                        <a class="line_send_btn" dataId="${cell.config.data.id}">发送</a>
                        <a class="line_esc_btn" dataId="${cell.config.data.id}">撤销</a>`;
                        // 个人-确认
                        // 人事-发送 撤销
                    }
                }
            }
        ],
        remote : function(){
            return zui_datagrid_remote({
                page_dom : personnel_salary, 
                url      : personnel_salary_api.datagrid
            });
        },
        remoteConverter : function(data){ 
            return zui_datagrid_filter({
                page_dom : personnel_salary,
                data     : data
            });
        }
    };
    //实例化
    personnel_salary.find('.datagrid').datagrid(
        zui_datagrid_option({
            datagrid   : personnel_salary.find('.datagrid'),
            dataSource : personnel_salary_dataSource
        })
    );
    //搜索
    personnel_salary.find('.tool_search_btn').click(function(){ 
        zui_datagrid_render({
            datagrid_obj : personnel_salary.find('.datagrid').data("zui.datagrid"),
            dataSource   : personnel_salary_dataSource
        }); 
    });

    // 确认
    personnel_salary.on("click", '.line_confirm_btn', function() {
        personnel_salary.find('.line_deal_form [name="id"]').val( $(this).attr('dataId') );
        um_data_submit({
            url: personnel_salary_api.confirm,
            form: personnel_salary.find('.line_deal_form'),
            dataSource: personnel_salary_dataSource,
        });
    });

    // 发送
    personnel_salary.on("click", '.line_send_btn', function() {
        personnel_salary.find('.line_deal_form [name="id"]').val( $(this).attr('dataId') );
        um_data_submit({
            url: personnel_salary_api.send,
            form: personnel_salary.find('.line_deal_form'),
            dataSource: personnel_salary_dataSource,
        });
    });

    // 撤销
    personnel_salary.on("click", '.line_esc_btn', function() {
        personnel_salary.find('.line_deal_form [name="id"]').val( $(this).attr('dataId') );
        um_data_submit({
            url: personnel_salary_api.esc,
            form: personnel_salary.find('.line_deal_form'),
            dataSource: personnel_salary_dataSource,
        });
    });

    // 组件实例化
    personnel_salary.find('.tool-search [name="starttime"]').datetimepicker(option_month);
    personnel_salary.find('.tool-search [name="endtime"]').datetimepicker(option_month);

    // 下拉菜单
    um_select_option({
        dom : personnel_salary.find('.tool-search [name="department"]'),
        url : personnel_salary_api.department,
        use : 'search',
    });

}); //预加载结尾
</script>